<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大厅</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/common.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /* 为了区分效果 */
        div[carousel-item]>*{text-align: center; line-height: 280px; color: #fff;}
        div[carousel-item]>*:nth-child(2n){background-color: #5FB878;}
        div[carousel-item]>*:nth-child(2n+1){background-color: #009688;}
        .content{
            padding: 0px 6px;
        }
        .content .title{
            padding: 6px 0px;
            border-bottom: 1.5px solid #c3c3c3;
        }
        .game-table{
            width: 100%;
            text-align: center;
            background: #fff;
            margin: 4px 0px;
        }
        .game-table td{
            height: 110px;
            border: 2px solid #f5f5f5;
        }
        .games{
            width: 100%;
        }
        .games td{
            border: 0px;
        }
        .games img{
            width: 60px;
            height: 66px;
        }
        .games .game-name{
            font-size: 16px;
            color: #404040;
            padding: 4px 6px;
        }
        .games .game-tips{
            font-size: 10px;
            padding: 4px 6px;
            color: #959696;
        }
        .games .game-play{
            width: 60px;
            background: #63b5fd;
            color: #fff;
            border-radius: 10px;
            padding: 2px 0px;
            margin: 4px auto;
        }
    </style>
</head>
<body>

<div class="layui-carousel" id="carousel">
    <div carousel-item>
        <div>条目1</div>
        <div>条目2</div>
        <div>条目3</div>
        <div>条目4</div>
    </div>
</div>

<div class="content">
    <div class="title">精彩游戏</div>
    <div>
        <table class="game-table">
            <tr>
                <td>
                    <table class="games">
                        <tr>
                            <td><img src="img/gua/g24.png"></td>
                            <td>
                                <div class="game-name">快乐赢家</div>
                                <div class="game-tips">熟悉的味道</div>
                                <div><div class="game-play">开始</div></div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="games">
                        <tr>
                            <td><img src="img/gua/g24.png"></td>
                            <td>
                                <div class="game-name">快乐赢家</div>
                                <div class="game-tips">熟悉的味道</div>
                                <div><div class="game-play">开始</div></div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table class="games">
                        <tr>
                            <td><img src="img/gua/g24.png"></td>
                            <td>
                                <div class="game-name">快乐赢家</div>
                                <div class="game-tips">熟悉的味道</div>
                                <div><div class="game-play">开始</div></div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="games">
                        <tr>
                            <td><img src="img/gua/g24.png"></td>
                            <td>
                                <div class="game-name">快乐赢家</div>
                                <div class="game-tips">熟悉的味道</div>
                                <div><div class="game-play">开始</div></div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>


<div style="height: 44px"></div>
<div class="footer">
    <div class="footer-item fl-left" onclick="gotoPage(this)" data-url="guaHall.html"><i class="fa fa-home"></i>首页</div>
    <div class="g-center">
        <div class="footer-item center-item" onclick="gotoPage(this)" data-url="guaHall.html"><i class="fa fa-gamepad active"></i>大厅</div>
    </div>

    <div class="footer-item fl-right" onclick="gotoPage(this)" data-url="myAccount.html"><i class="fa fa-user"></i>我的</div>
</div>


<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script src="layui/layui.js"></script>

<script type="application/javascript">
    $(function () {
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#carousel'
                ,width: '100%' //设置容器宽度
                ,height:'100px'
                ,arrow: 'hover' //始终显示箭头
                ,autoplay:true
                ,interval:2000
            });
        });
    });

    function gotoPage(me) {
        var pageurl = $(me).attr("data-url");
        window.location.href=pageurl;
    }

</script>
</body>
</html>